<template>
     <!-- 最大的盒子开始 -->
    <div class="threeDiscount">
        <!-- 顶部导航开始 -->
        <div class="subscribe-title">
            <router-link to="/home" tag="div" class="s-title-subscribe">
                <!-- <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/05/18/33/007e403c816be53df659d9340aaa5bd9.png!75.webp" alt=""> -->
                <span>返回主频道</span>
            </router-link>
            <router-link tag="div" to="/search" class="s-title-search">
                <div class="search-btn  icon-sousuo iconfont"></div>
            </router-link>
            <router-link tag="div" to="sort" class="s-title-square">
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/05/18/174/9fd80f0918822cd0af4ec74828817ace.png!75.webp" alt="">
                <span>频道广场</span>
            </router-link>
        </div>
        <!-- 顶部导航结束 -->
        <!--导购界面开始  -->
        <div class="mst-purchase">
            <img class="auto-img" src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/10/20/61/51371ccb624c32362417974145792f4b.jpg!75.webp" alt="">
        </div>
        <!-- 导购界面结束 -->
        <!-- 疯抢大牌开始 -->
        <div class="mst-big-brand">
           <div class="big-brand-connent">
             <div class="big-brand-left">
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2022/10/24/101/1666602666125_402x810_90.jpg!75.webp" alt="">
             </div>
             
             <div class="big-brand-right">
                <div class="brand-item">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/09/27/35/566f47f0-9b54-4ed4-8d95-61de423d76c6_280x280_90.jpg!75.webp" alt="">
                    <div class="brand-bottom">
                        <span>￥1509</span>
                        <div><i>2.7折</i></div>
                    </div>
                </div>
                <div class="brand-item">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2021/10/17/110/41aa9df3-61b7-428f-a4c9-337a442aab02_280x280_90.jpg!75.webp" alt="">
                    <div class="brand-bottom">
                        <span>￥351</span>
                        <div><i>1.6折</i></div>
                    </div>
                </div>
                <div class="brand-item">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/24/75/1e0947aa-1f97-45bb-a41d-46e0e8e55c09_280x280_90.jpg!75.webp" alt="">
                    <div class="brand-bottom">
                        <span>￥809</span>
                        <div><i>1.6折</i></div>
                    </div>
                </div>
                <div class="brand-item">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/10/13/85/31304ea5-412e-40e1-9b76-b0da5b4ea3e9_280x280_90.jpg!75.webp" alt="">
                    <div class="brand-bottom">
                        <span>￥539</span>
                        <div><i>2.3折</i></div>
                    </div>
                </div>
             </div>
           </div>
        </div>
        <!-- 疯抢大牌结束 -->
        <!-- 特别策划开始 -->
        <div class="mst-component-content1">
            <span class="component-content-header">11.11特别策划 户外出游</span>
            <div class="swiper">
                <van-swipe class="my-swipe" :loop="false" :width="87.5" :autoplay="1000" :show-indicators=false>
                  <van-swipe-item>
                    <div class="item-lists">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2021/01/26/88/f4638dea-a1df-4c35-a1ad-4e38b44b54e6_244x244_90.jpg!75.webp" alt="">
                        <i>运动装2.4折抢</i>
                        <div><span>特卖价：</span>￥179</div>
                    </div>
                  </van-swipe-item>
                  <van-swipe-item>
                    <div class="item-lists">
                    <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/30/26/ias_d9e01c5fe6e504f3507f43659de37e81_244x244_90.png!75.webp" alt="">
                    <i>骆驼62元抢</i>
                    <div><span>特卖价：</span>￥62</div>
                    </div>
                  </van-swipe-item>
                  <van-swipe-item>
                    <div class="item-lists">
                     <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/12/23/197/ias_9ad85d1a187c0c3fe86589b239ef5f4f_244x244_90.png!75.webp" alt="">
                    <i>运动外套3折抢</i>
                    <div><span>特卖价：</span>￥179</div>
                    </div>
                  </van-swipe-item>
                  <van-swipe-item>
                    <div class="item-lists">
                     <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/07/24/92/ias_dfe1ddf2374660990d9f06bdd644e6e2_244x244_90.png!75.webp" alt="">
                    <i>运动鞋2.4折抢</i>
                    <div><span>特卖价：</span>￥96</div>
                    </div>
                  </van-swipe-item>
                  <van-swipe-item>
                    <div class="item-lists">
                     <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/08/16/91/ias_b53d124473374a76db0cbda0738d1d7e_244x244_90.png!75.webp" alt="">
                    <i>运动休闲裤2.7折抢</i>
                    <div><span>特卖价：</span>￥109</div>
                    </div>
                  </van-swipe-item>
                  <van-swipe-item>
                    <div class="item-lists">
                     <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/29/131/ias_3fd4136f7227b45db43171e188cae5a5_244x244_90.png!75.webp" alt="">
                    <i>55元抢暴走萝莉</i>
                    <div><span>特卖价：</span>￥55</div>
                    </div>
                  </van-swipe-item>
                  <van-swipe-item>
                    <div class="item-lists">
                     <img src="https://h2.appsimg.com/a.appsimg.com/upcb/2021/03/30/26/ias_d9e01c5fe6e504f3507f43659de37e81_244x244_90.png!75.webp" alt="">
                    <i>骆驼62元抢</i>
                    <div><span>特卖价：</span>￥62</div>
                    </div>
                  </van-swipe-item>
                </van-swipe>
            </div>
        </div>  
        <!-- 特别策划结束 -->
        <!-- 全场3.1折 -->
        <div class="mst-component-content2">
            <van-swipe class="my-swipe1" :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2022/10/25/52/1666698324595_1125x300_90.png!75.webp" alt="">
              </van-swipe-item>
              <van-swipe-item>
                <img src="https://h2.appsimg.com/b.appsimg.com/upload/momin/2022/10/26/158/1666750957532_1125x300_90.png!75.webp" alt="">
              </van-swipe-item>
             
            </van-swipe>
        </div>
        <div class="white"><img src="https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/10/20/22/79a02c48d52744ba211a846bd78ebb36.jpg!75.webp" class="auto-img"></div>
        <!-- 双十一提前购 -->
        <div class="mst-component-content3">
            <div class="nav-wrapper">
                <div class="nav-wrapper-cointainer" v-show="!flag">
                    <div class="nav-wrap-item1">11.11<span>提前购</span></div>
                    <div class="nav-wrap-item">秋冬尚新</div>
                    <div class="nav-wrap-item">女装</div>
                    <div class="nav-wrap-item">鞋包</div>
                    <div class="nav-wrap-item">男装</div>
                    <div class="nav-wrap-item2" @click="flag =!flag"></div>
                </div>
                <div class="nav-wrapper-cointainer2" v-show="flag">
                    <div class="nav-wrap-header">
                        <div class="header-item1">请选择</div>
                        <div class="header-item2" @click="flag =!flag"></div>
                    </div>
                    <div class="nav-wrap-content">
                        <div class="wrap-item1">
                            <span>11.11提前购</span>
                        </div>
                        <div class="wrap-item">秋冬尚新</div>
                        <div class="wrap-item">女装</div>
                        <div class="wrap-item">鞋包</div>
                        <div class="wrap-item">男装</div>
                        <div class="wrap-item">童装</div>
                        <div class="wrap-item">内衣</div>
                        <div class="wrap-item">体用</div>
                        <div class="wrap-item">家纺</div>
                        <div class="wrap-item">精品</div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 品牌推荐 -->
        <router-link to="/productDetail" tag="div" class="brand-floor">
            <div class="brand-floor-item">
                <div class="floor-item-header">
                    <div class="item-header-list1">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/144fc1ef7f1c468398e997d00c8e8407/10000608/black_200x200_85.png!75.webp" alt="">
                        <img src="https://h2.appsimg.com/a.appsimg.com/upload/brandcool/0/c86c84bba31c435f8405900618b5bd7b/10000498/black_200x200_85.png!75.webp" alt="">
                    </div>
                    <div class="item-header-list2">
                        <span>3折封顶</span>
                    </div>
                    <div class="item-header-list3">
                        <p>梦特娇，凯撒等男装疯抢专场</p>
                    </div>
                </div>
                <div class="floor-item-content">
                    <div class="item-content-list">
                        <div class="content-image">
                           <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2021/03/10/55/6373a53a-f581-4339-b6b5-3d67c0f23ea2_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥86</span>
                            <div>1.4折</div>
                        </div>
                        <span class="content-text2">￥599</span>
                    </div>
                    <div class="item-content-list">
                        <div class="content-image">
                            <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/10/20/107/1284d65c-31ff-4ca9-8c73-20153d009fc2_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥79</span>
                            <div>1.1折</div>
                        </div>
                        <span class="content-text2">￥749</span>
                    </div>
                    <div class="item-content-list">
                        <div class="content-image">
                            <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/08/03/193/28c5b271-9e36-4ceb-87d8-290ef16159dd_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥80</span>
                            <div>1.6折</div>
                        </div>
                        <span class="content-text2">￥499</span>
                    </div>
                    <div class="item-content-list">
                        <div class="content-image">
                            <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634188/2022/0810/86/03da7438-b0c9-4bbd-9218-59458d808d72_228x288_85.jpg!75.webp" alt="">
                        </div>
                        <div class="content-text">
                            <span>￥296</span>
                            <div>1.9折</div>
                        </div>
                        <span class="content-text2">￥1580</span>
                    </div>
                </div>
            </div>
        </router-link>
    </div>
    <!-- 最大的盒子结束 -->
</template>

<script>
    export default {
        name:"threeDiscountView",
        data() {
            return {
                flag: false,
            };
        },
    }
</script>
// scoped
<style lang="scss"  scoped>
.subscribe-title{
    position:fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    width: 100%;
    background-image: url("https://h2.appsimg.com/b.appsimg.com/upload/mst/2022/10/20/71/73a4097194c48b69ab195c2eb721e032.jpg");

    .s-title-subscribe{
        width: 67px;
        height: 26px;
        box-sizing: border-box;
        border: 1px solid #fff;
        overflow: hidden;
        border-radius: 12px;
        background-color: #fd5c7c;
        display: flex;
        align-items: center;
        margin-left: 14px;
        img{
            width: 8px;
            height: 8px;
            margin-left: 3px;
        }
        span{
            font-size: 12px;
            color: #fff;
            margin-left:2px ;
            transform: scale(0.9);
        }

    }
    .s-title-search{
        width: 218px;
        height: 30px;
        background-color: #fff;
        border-radius: 15px;
        margin-left:14px ;
        display: flex;
        align-items: center;

        .search-btn{
           height: 16px;
           width: 16px;
           margin-left: 11px;
        }
    }
    .s-title-square{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 0 0 10.5px;

        img{
            width: 25px;
        }
        span{
            margin-top: 3px;
            font-size: 12px;
            color: #fff;
            // transform: scale(0.9);
        }
    }
}
.mst-purchase{
    margin-top: 56px;
    height: 99px;

}
.mst-big-brand{
    width: 100%;
    height: 337.5px;
    background: url("https://h2.appsimg.com/b.appsimg.com/upload/momin/2022/10/23/79/1666495183125_1125x1012_90.jpg!75.webp")no-repeat 0 0/cover;
    display: flex;
    justify-content: space-between;
    padding: 57px 18px 11px;
    box-sizing: border-box;

    .big-brand-connent{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .big-brand-left{
            width: 134px;
            height: 270px;
            border-radius: 10px;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .big-brand-right{
            width: 196px;
            height: 270px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .brand-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                margin-top: 10px;
                height: 120px;
                width: 95px;
                // background-color: black;
                img{
                    width: 93.5px;
                }
                .brand-bottom{
                    margin-top: 15px;
                    display: flex;
                    span{
                        font-size: 16px;
                        font-weight: 550;
                        margin-right: 1.5px;
                    }
                    div{
                        width: 32.5px;
                        height: 12.5px;
                        background: url(https://h2.appsimg.com/b.appsimg.com/upload/momin/2022/09/16/14/1663314992655_97x37_90.png!75.webp)no-repeat 0 0/cover;
                        background-size: 100%;
                        text-align: center;
                        line-height: 12.5px;
                        i{
                            display: inline-block;
                            transform: scale(0.8);
                            color: #f80066;
                        }
                    }
                }
            }
        }

    }

}
.mst-component-content1{
    width: 100%;
    height: 184px;
    background: url("https://h2.appsimg.com/b.appsimg.com/upload/momin/2022/10/20/135/1666250287127_1125x552_90.jpg!75.webp")no-repeat 0 0/cover;
    padding: 0 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    
    .component-content-header{
        margin: 16px 0 16px 10px;
        font-size: 15px;
        font-weight: 550;
        white-space: pre;

    }
}
.my-swipe .van-swipe-item{
    padding-right:3px ;
    box-sizing: border-box;
    height: 121.5px;
    
    .item-lists{
    width: 100%;
    height: 121.5px;
    display: flex;
    border-radius: 5px;
    flex-direction: column;
    align-items: center;
    // margin-right: 3px;
    overflow: hidden;
    background-color: #fff;
    img{
        width: 100%;
    }
    i{
        font-size: 12px;
        color: #232323;
        margin-top: 6px;  
        white-space: nowrap;  
        overflow: hidden;
       text-overflow: ellipsis;
    }
    div{
        font-size: 12px;
        color: #f80066;
        margin-top: 5px;
        span{
            font-size: 12px;
            display:inline-block;
            transform: scale(0.9);
            color: #232323;
        }
    }

    }
    
}
.mst-component-content2{
    width: 100%;
    height: 100px;
    // padding: 0 10px;
    box-sizing: border-box;
    background-color: #ef004b;
    // background: url() no-repeat 0 0/cover;
}
.my-swipe1{
    background-color: #ef004b;
}
.my-swipe1 .van-swipe-item{
    
    img{
        width: 100%;
    }
}

.mst-component-content3{

    .nav-wrapper{
        width: 100%;
        .nav-wrapper-cointainer{
            display: flex;
            justify-content: space-evenly;
            height: 55px;
            align-items: center;

            .nav-wrap-item1{
                
                width: 108px;
                height: 26px;
                font-size: 14px;
                font-weight: 550;
                color: rgb(243, 244, 245);
                background: rgb(240, 56, 103);
                text-align: center;
                line-height: 26px;
                border-radius: 5px;
                overflow: hidden;
                span{
                    font-size: 16px;
                    line-height: 26px;
                }
            }
            .nav-wrap-item{
                font-size: 14px;
            }
            .nav-wrap-item2{
                width: 12px;
                height: 12px;
                background: url("../assets/image/箭头.png") no-repeat 0 0/cover;
            }
        }

        .nav-wrapper-cointainer2{
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .nav-wrap-header{
                display: flex;
                justify-content: space-between;
                width: 100%;
                align-items: center;
                height: 55px;

                .header-item1{
                    flex: 1;
                    text-align: center;
                    font-size: 13px;
                }
                .header-item2{
                    width: 12px;
                    height: 12px;
                    margin-right:15px;
                    background: url("../assets/image/箭头2.png") no-repeat 0 0/cover;
                }
            }
        }

        .nav-wrap-content{
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .wrap-item1{
                display: flex;
                align-items: center;
                height: 55px;
                width: 93.5px;
                padding-left: 5px;
                box-sizing: border-box;
                span{
                    padding:0 8px;
                    box-sizing: border-box;
                    font-size: 16px;
                    font-weight: 550;
                    display: inline-block;
                    width: 90px;
                    height: 26px;
                    border-radius: 13px;
                    color: rgb(243, 244, 245);
                    background: rgb(240, 56, 103);
                    text-align: center;
                    line-height: 26px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
            .wrap-item{
                height: 55px;
                width: 93.5px;
                text-align: center;
                line-height: 55px;
                font-size: 13px;
                color: black;
            }
        }
    }
}
.brand-floor{
    width: 100%;
    display: flex;
    flex-direction: column;

    .brand-floor-item{
        margin: 0px 9px 12px;
        height: 280px;
        width: 357px;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .floor-item-header{
            width: 357px;    
            height: 150px;
            background: url(https://h2.appsimg.com/a.appsimg.com/upload/brand/upcb/2022/10/23/110/ias_e00ec90e0ce36196386d60fd4446b385.jpg!75.webp)no-repeat 0 0/cover;
            display: flex;
            flex-direction: column;

            .item-header-list1{
                display: flex;
                margin-left: 15px;
                margin-top:20px;

                img{
                    width: 70px;
                    height: 35px;
                    margin-right: 10px;
                }
            }
            .item-header-list2{
                margin-left: 15px;
                margin-top:25px;
                width: 68px;
                height: 20px;
                border-radius: 10px;
                background-color: #f03867;
                text-align: center;
                line-height: 20px;
                span{
                    font-size: 12px;
                }
            }
            .item-header-list3{
                margin-top:10px ;
                margin-left: 15px;
                font-size: 14px;
                font-weight: 550;
                line-height: 15px;
            }
        }

        .floor-item-content{
            margin-top: 10px;
            padding: 0 13px;
            width: 357px;
            height: 120px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .item-content-list{
                display: flex;
                flex-direction: column;
                align-content: center;
                width: 76px;
                height: 114px;

                .content-image{
                    width: 76px;
                    border-radius: 5px;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }

                .content-text{
                    display: flex;
                    justify-content: center;
                    margin-top: 7px;
                    span{
                        font-size: 14px;
                        font-weight: 50px;
                        font-weight: 550;
                        margin-right: 10px;
                    }
                    div{
                        width: 33px;
                        height: 12px;
                        font-size: 12px;
                        color: #fff;
                        background-color: #f03867;
                        position: relative;

                        &:before{
                            content: "";
                            width: 7px;
                            height: 12px;
                            background: url("https://h2.appsimg.com/b.appsimg.com/upload/mst/2021/07/28/1/0d184032954257dc1f6fef98640fb609.png")no-repeat 0 0 /cover;
                            position: absolute;
                            top: 0;
                            left: -6px;
                        }
                    }
                }

                .content-text2{
                    text-align: center;
                    margin-top: 7px;
                    font-size: 12px;
                    display: inline-block;
                    color: #98989f;
                    text-decoration:line-through;
                }
            }
        }
    }

}
</style>